import React, { Component } from 'react'
import { NavLink, Route, Switch,Redirect } from 'react-router-dom'
// BrowserRouter HashRouter 两种路由模式
import About from './pages/About'
import Home from './pages/Home'
import Header from './components/Header'
export default class App extends Component {



	render() {
		return (
			<div>
			<div className="row">
			  <div className="col-xs-offset-2 col-xs-8">
				<Header></Header>
			  </div>
			</div>
			<div className="row">
			  <div className="col-xs-2 col-xs-offset-2">
				<div className="list-group">
					{/* 原生a标签跳转链接 */}
				  {/* <a className="list-group-item active" href="./about.html">About</a>
				  <a className="list-group-item" href="./home.html">Home</a> */}
				  {/* react路由跳转--编辑路由链接 跳转到的组件名一般使用小写字母开头 */}
				   {/* <Link className="list-group-item" to='/about'>About</Link>
				  <Link className="list-group-item" to='/home'>Home</Link> */}
				    <NavLink className="list-group-item" to='/about'>About</NavLink>
				  <NavLink className="list-group-item" to='/home'>Home</NavLink>
				 
				</div>
			  </div>
			  <div className="col-xs-6">
				<div className="panel">
				  <div className="panel-body">
					{/* 注册路由 */}
					{/* Switch可以提高路由匹配效率(单一匹配,匹配到一个就不再匹配了)。 */}
					<Switch>
					{/* exact 开启严格匹配 这里不开启严格匹配 */}
					<Route path='/about'  component={About}></Route>
					<Route path='/home'  component={Home}></Route>
					{/* Redirect 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由 */}
					<Redirect to='/about'></Redirect> 
					</Switch>
				  </div>
				</div>
			  </div>
			</div>
		  </div>
		)
	}
}
